<script setup lang="ts">
import havaHeadCard from "@/components/haveHead-card.vue";
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
import accountEmit from "@/components/accountEmit.vue";

let tableData = ref([
  {
    date: '2016-05-03',
    name: '小貂禅',
    ground: '超级管理员'
  },
  {
    date: '2016-05-02',
    name: '李寻欢',
    ground: '超级管理员'
  },
  {
    date: '2016-05-04',
    name: '赵子龙',
    ground: '普通管理员'
  },
  {
    date: '2016-05-01',
    name: 'admin',
    ground: '超级管理员'
  },
  {
    date: '2016-05-08',
    name: 'user',
    ground: '普通管理员'
  },
  {
    date: '2016-05-06',
    name: '诸葛亮',
    ground: '普通管理员'
  },
  {
    date: '2016-05-07',
    name: '刘备',
    ground: '超级管理员'
  },
])
//编辑的下标
let editIndex: any = ref(null)

//弹窗状态
let dialogVisible = ref(false)
//编辑回显数据
let editData = reactive({})

//关闭弹窗
function closeMask(data: boolean) {
  dialogVisible.value = data
}

//点击编辑按钮
function handleClick(item: object, index: number) {
  dialogVisible.value = true
  editData = item
  editIndex.value = index
  console.log(item)
}

//获取编辑回显数据
function getEditData(data: object) {
  console.log(data)
  tableData.value[editIndex.value] = data

}


//单个删除
function oneClickDelete(index: number) {
  tableData.value.splice(index, 1)

}


let checkedList = ref([])
//删除全部账号提示框
const checked = () => {
  if (!(checkedList.value.length > 0)) {
    ElMessage.error('请选择需要删除的账号!!')
    return
  }
  ElMessageBox.confirm(
      '确定删除全部账号?',
      '删除提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }
  )
      .then(() => {
        tableData.value = []
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}


//选择按钮
function handleSelectionChange(value: string[]) {
  checkedList.value = value

}


const multipleTableRef = ref<InstanceType<typeof ElTable>>()

//取消选择按钮
const noChecked = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}


//分页数据

const currentPage4 = ref(4)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

function handleSizeChange(val: number) {
  console.log(`${val} items per page`)
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`)
}


</script>

<template>
  <div class="account-list">
    <havaHeadCard>
      <template #title>
        <h2>账号列表</h2>
      </template>
      <template #content>
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column property="name" label="账号" width="250"/>
          <el-table-column property="ground" label="用户组" width="250"/>
          <el-table-column label="创建时间" property="date" width="250"></el-table-column>
          <el-table-column fixed="right" label="Operations" width="250">
            <template #default="scope">
              <el-button size="default" @click="handleClick(scope.row, scope.$index)">
                编辑
              </el-button>
              <el-button type="danger" size="default" @click="oneClickDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <div class="footer">
          <el-pagination
              v-model:current-page="currentPage4"
              v-model:page-size="pageSize4"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total,prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>

        <div class="footer-btn">
          <el-button type="danger" @click="checked">删除全部</el-button>
          <el-button type="primary" @click="noChecked()">取消选择</el-button>
        </div>
      </template>
    </havaHeadCard>
    <accountEmit :dialogVisible="dialogVisible" @close-mask="closeMask" :editData="editData" @edit-data="getEditData"/>
  </div>
</template>

<style scoped>
.footer-btn {
  margin-top: 10px;
}
</style>